<template>
<div :style="{width:'100%',height: '300px'}" v-loading='loading'>
    <div id="myChart2" :style="{width:'100%',height: '300px'}" v-if="!isShow"></div>
    <state-view :isShow=isShow :description=description :image=image style="margin-bottom:30px" @reload='getCurrentDate'></state-view>
</div>
</template>

<script>
export default {
  props: {
      data:Array,
      outStockData:Array,
  },
  components: {

  },
  data() {
    return {

      loading:true,
      isShow:false,//是否展示状态组件
      description:'',//状态组件提示信息
      image:null,//状态组件图片资源
      value:new Date().getFullYear()+'',
      monthSource:[],
      dataSource:[],
      dataSource1:[]
    };
  },
  computed: {
      getMonthData(){
          let current = new Date().getMonth()+1
          if(current<10){
              return '0'+current
          }else{
              return current+''
          }
      },
      
  },
  watch: {
   
      
  },
  created() {
    let day = this.getMonthDays(this.value,this.getMonthData)
    for(let i=0;i<day;i++){
      this.dataSource[i]=0
      this.dataSource1[i]=0
      this.monthSource[i]=i+1
    }
  },
  mounted() {
    this.getCurrentDate()
   console.log(this.data);
  },
  methods: {
    
    drawLine(){
        let  myCharts=document.getElementById('myChart2')  // 增加这一行
        myCharts.style.width='100%'
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption({
            title: { 
                text: `${this.value}年${this.getMonthData}月出入库件量统计`,
                textAlign:'left',
                x:'center',
                left:'2.5%',
                y:'top',
                textStyle: {
                color: '#666666',
                fontSize: 18
              },
             },
            tooltip: {
               trigger: 'axis'
            },
            legend: {
              data: ['入库件量', '出库件量']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              //坐标轴类型
                //type:'category',
                data: this.monthSource
            },
            yAxis: {
              type:'value',
              minInterval: 1,
              axisLabel: {  //坐标轴刻度标签的相关设置。
                  formatter: '{value}件'  //字符串模板
              }
            },
            series: [
              {
                name: '入库件量',
                type: 'line',
                data: this.dataSource,
                smooth:true,
                itemStyle:{ //图形的颜色。默认指向全局的option.color
                  color:'#f25e43'
              },

              },
              {
                name: '出库件量',
                type: 'line',
                stack: 'Total',
                data: this.dataSource1
              },
            true],
           
        });
    },

    getCurrentDate(){
        let day = this.getMonthDays(this.value,this.getMonthData)
        let startTime= new Date(`${this.value}-${this.getMonthData}-01 00:00:00`);
        let endTime= new Date(`${this.value}-${this.getMonthData}-${day} 23:59:59`);
        let array = []
        let array1=[]
        let timer = null
        if(this.data.length||this.outStockData.length){
          this.data.forEach(item => {
            if(new Date(item.createdAt)>=startTime&&new Date(item.createdAt)<=endTime){
              array.push(item)
            }
          });

          this.outStockData.forEach(item => {
            if(new Date(item.createdAt)>=startTime&&new Date(item.createdAt)<=endTime){
              array1.push(item)
            }
          });
         
          timer = setInterval(() => {
            if(array.length||array1.length){
              array.forEach(val => {
                let sum = 0
                for(let i=1;i<day;i++){
                    if(i<10){
                    if(val.createdAt.slice(8,10)===`0${i}`){
                        sum=sum+val.amount
                        this.dataSource[i-1]+=sum
                    }
                    }else{
                    if(val.createdAt.slice(8,10)===i+''){
                        sum=sum+val.amount
                        this.dataSource[i-1]+=sum
                    }
                    }
                  }
              });
              array1.forEach(val => {
                let sum = 0
                for(let i=1;i<day;i++){
                    if(i<10){
                    if(val.createdAt.slice(8,10)===`0${i}`){
                        sum=sum+val.amount
                        this.dataSource1[i-1]+=sum
                    }
                    }else{
                    if(val.createdAt.slice(8,10)===i+''){
                        sum=sum+val.amount
                        this.dataSource1[i-1]+=sum
                    }
                    }
                  }
              });
             
              this.loading=false
              this.isShow=false
              this.$echarts.init(document.getElementById('myChart2')).clear();
              this.drawLine();
              clearInterval(timer)
          }  
          }, 500);
        }else{
          for(let i=0;i<day;i++){
            this.dataSource[i]=0
            this.dataSource1[i]=0
            this.monthSource[i]=i+1
          }
          this.$echarts.init(document.getElementById('myChart2')).clear();
          this.loading=false
          this.isShow=true
          this.description='暂无数据'
          this.image=require('@/assets/empty.png') 
        }
    },

    
    getMonthDays(year,month){
        let stratDate = new Date(Number(year),Number(month)-1,1)
        let endData= new Date(Number(year),Number(month),1);
        let days = (endData -stratDate)/(1000*60*60*24);
        return days;
    }

  },
};
</script>


